<template>
  <task-list v-if="key === 1" />
  <task-processing v-if="key === 2" />
  <task-details v-if="key === 3" />
  <el-dialog
    :title="$t('flowDefine.flowchart')"
    width="70vw"
    custom-class='task_dialog'
    destroy-on-close
    v-model="dialogChart"
  >
    <Modal :data="data" />
  </el-dialog>
</template>

<script>
// import Modal from "@/views/page/processHandle/historyList/component/Modal.vue";
import Modal from "../../process-handle/historyList/component/Modal.vue";
import { mapState } from "vuex";
import taskDetails from "./taskDetails/index.vue";
import taskList from "./taskList/index.vue";
import taskProcessing from "./taskProcessing/index.vue";
export default {
  data() {
    return {
      dialogChart: false,
      data: {},
    };
  },
  provide() {
    return {
      showView: this.showView,
    };
  },
  components: {
    Modal,
    taskDetails,
    taskList,
    taskProcessing,
  },

  computed: {
    ...mapState("flowTaskStore", ["processInfo"]),
    ...mapState({ key: (state) => state.flowTaskStore.key }),
  },

  // mounted() {},

  methods: {
    /**
     *  查看流程追踪
     *
     * @param {*} payload
     */
    // eslint-disable-next-line no-unused-vars
    showView(payload) {
      this.data = {
        processIntanceId: payload.processInstanceId, //流程实例id
        processDefinitionId: payload.processDefinitionId, //流程定义id
      };
      this.processInfo = payload;
      this.dialogChart = true;
    },
  },
};
</script>
<style lang='scss' >
 .task_dialog > .el-dialog__body{
  height: 70vh;
  overflow: auto;
}
</style>